<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钉钉登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
 

    </style>
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.1.0/dingtalk.open.js"></script>
    <script src="js/axios.min.js"></script>
      <script language="javascript" src="https://testai.hanyuai.online/js/jquery.min.js"></script>
</head>
<body>
<!-- 加载动画 -->
<div id="loadingOverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(88, 156, 255, 0.9); display: flex; justify-content: center; align-items: center; z-index: 9999;">
    <div class="loader">
        <div class="spinner"></div>
        <p style="color: white; font-size: 18px; margin-top: 20px;">正在登录中...</p>
    </div>
</div>

<div style="display:none">
<img src="http://tqi.techlinkpets3d.com/h5/static/logo.png" alt="logo" style="width: 300px;">
<div id="loginStatus" style="position: absolute; top: 20px; right: 20px; color: white; font-size: 16px;">未登录</div>
<div class="memo">钉钉情况：<br>
    <div id="text"></div>
    <div id="div"></div>
</div>
<div onclick="goplm()">进入</div>
</div>
<script>
    var baseUrl = "https://tqi.techlinkpets3d.com/api/bossview/";
    var plmUrl = "";
    baseUrl = "https://tqi.techlinkpets3d.com/api/daka/";
	async function getDingUserInfo(code) {
        // 显示加载动画
        document.getElementById('loadingOverlay').style.display = 'flex';
        
        try {
            const res = await axios.get(baseUrl + 'getDingUserInfo', {
                params: {
                    code: code // 前端传来的 code
                }
            });
           
            //showmsg('授权成功，code:' + code);
            //var url = baseUrl + 'getDingUserInfo?code='+code;
            //$('#div').load(url);
            //localStorage.setItem('UserInfo', JSON.stringify(res.data.data.user));
            //localStorage.setItem('DingData', JSON.stringify(JSON.parse(res.data.data.user.ding_data)));
            //localStorage.setItem('token', res.data.data.token);
            //const DingData = JSON.parse(localStorage.getItem('DingData'));
            document.getElementById('text').textContent = code;
             //showmsg(res.data.data.user.username);
            document.getElementById('loginStatus').textContent = res.data.data.user.username;
            console.log(JSON.stringify(res.data.data.user));
            //var url = "http://aigc.techlinkpets3d.com:8188/";
           // window.open(url);
           var url = res.data.data.user.url
           //url = "daka.html?ding_id=" + res.data.data.user.ding_id;
           url = "daka.html?uid=" + res.data.data.user.id;
           plmUrl = url;
            $('#div').html("自动登录:"+url);
            //console.log(url);
            //document.location =  url;
            autogoto(url);
        } catch (error) {
            // 隐藏加载动画
            document.getElementById('loadingOverlay').style.display = 'none';
            showmsg('登录失败: ' + error.message);
            console.error('登录失败:', error);
        }
    }
    
    function autogoto(url){
        setTimeout(function(){
            // 隐藏加载动画
            document.getElementById('loadingOverlay').style.display = 'none';
            document.location =  url;
            //window.open(url);
        },500);
    }
    
    function goplm(){
        document.location =  plmUrl;
    }
	
	function showmsg(msg){
	    showCustomModal(msg);
	   // document.getElementById('text').textContent = msg;
	}
	
	// 显示自定义弹出层
	function showCustomModal(message, title = "提示", type = "info") {
	    const modal = document.getElementById('customModal');
	    const titleElement = document.getElementById('customModalTitle');
	    const messageElement = document.getElementById('customModalMessage');
	    const button = document.getElementById('customModalButton');
	    
	    titleElement.textContent = title;
	    messageElement.textContent = message;
	    
	    // 根据类型设置按钮样式
	    button.className = "custom-modal-button";
	    if (type === "success") {
	        button.classList.add("success");
	    } else if (type === "error") {
	        button.classList.add("error");
	    }
	    
	    modal.style.display = "block";
	}
	
	// 关闭自定义弹出层
	function closeCustomModal() {
	    const modal = document.getElementById('customModal');
	    modal.style.display = "none";
	}
	
	// 点击弹出层背景关闭弹出层
	window.onclick = function(event) {
	    const modal = document.getElementById('customModal');
	    if (event.target == modal) {
	        closeCustomModal();
	    }
	}
	    // 钉钉免登录代码
    async function initDingTalkAuth() {
        // 页面加载时显示加载动画
        document.getElementById('loadingOverlay').style.display = 'flex';
        
        try {
            const res = await axios.get(baseUrl + 'auth?action=getConfig', {
                params: { url: '' }
            });
            //window.location.href
            const dd = window.dd;
            dd.ready(function() {
                dd.runtime.permission.requestAuthCode({
                    corpId: res.data.corpId,
                    onSuccess: function(info) {
                        // 存储授权码
                        localStorage.setItem('code', info.code);
                        getDingUserInfo(info.code);
                        console.log('授权成功，code:', info.code);
                        
						//showmsg('授权成功，code:')
                    },
                    onFail: function(err) {
                        // 隐藏加载动画
                        document.getElementById('loadingOverlay').style.display = 'none';
                        showmsg(err.message)
                        console.error('获取授权码失败:', err);
                    }
                });
            });
        } catch (error) {
            // 隐藏加载动画
            document.getElementById('loadingOverlay').style.display = 'none';
            showmsg('初始化钉钉认证失败:' + error.message)
            console.error('初始化钉钉认证失败:', error);
        }
    }


    
    // 页面加载完成后初始化钉钉认证
    window.addEventListener('load', initDingTalkAuth);
</script>
    <!-- 自定义弹出层 -->
    <div id="customModal" class="custom-modal">
        <div class="custom-modal-content">
            <div class="custom-modal-header">
                <h3 class="custom-modal-title" id="customModalTitle">提示</h3>
                <span class="custom-modal-close" onclick="closeCustomModal()">&times;</span>
            </div>
            <div class="custom-modal-body">
                <p class="custom-modal-message" id="customModalMessage"></p>
            </div>
            <div class="custom-modal-footer">
                <button class="custom-modal-button" id="customModalButton" onclick="closeCustomModal()">确定</button>
            </div>
        </div>
    </div>
</body>
</html>
<style>
    body {
        background-color: rgb(88,156,255);

        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
    }
    
    /* 加载动画样式 */
    .loader {
        text-align: center;
    }
    
    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 1s ease-in-out infinite;
        margin: 0 auto;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    /* 自定义弹出层样式 */
    .custom-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        animation: fadeIn 0.3s ease;
    }
    
    .custom-modal-content {
        background-color: #fff;
        margin: 15% auto;
        padding: 0;
        border-radius: 8px;
        width: 90%;
        max-width: 400px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        animation: slideIn 0.3s ease;
    }
    
    .custom-modal-header {
        padding: 20px;
        background-color: #3498db;
        color: white;
        border-radius: 8px 8px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .custom-modal-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }
    
    .custom-modal-close {
        color: white;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
    }
    
    .custom-modal-body {
        padding: 20px;
        text-align: center;
    }
    
    .custom-modal-message {
        margin: 0 0 20px 0;
        font-size: 16px;
        color: #333;
    }
    
    .custom-modal-footer {
        padding: 15px 20px;
        text-align: center;
        border-top: 1px solid #eee;
    }
    
    .custom-modal-button {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    
    .custom-modal-button:hover {
        background-color: #2980b9;
    }
    
    .custom-modal-button.success {
        background-color: #27ae60;
    }
    
    .custom-modal-button.success:hover {
        background-color: #219653;
    }
    
    .custom-modal-button.error {
        background-color: #e74c3c;
    }
    
    .custom-modal-button.error:hover {
        background-color: #c0392b;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideIn {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .inputText{
        border-radius: 15px;
        padding: 5px;
        border-color: #fff;
        margin-top:15px;
    }
    pre {
        background-color: #f4f4f4;
        padding: 10px;
        white-space: pre-wrap;
        width:100%;
        border-radius: 15px;
    }
    .memo {
        border: 1px dashed #fff;
        border-radius: 10px;
        padding: 3px;
        display: block;
        margin: 20px 0 0 0;

    }
    button {
        display: block;

        margin-bottom:0;
        background-color: #f6ab00;
        width:200px;
        color: white;
        border: none;
        border-radius: 25px;
        padding: 10px 20px;
        cursor: pointer;
    }
    .material-list {
        margin-top: 20px;
    }
    .material-item {
        background-color: white;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .material-info {
        flex: 1;
    }
    .material-field {
        margin-bottom: 5px;
    }
    .button-group {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 20px 0;
    }
    .pending-return-text {
        color: #f6ab00;
        cursor: pointer;
        font-size: 16px;
        padding: 10px 0;
        text-decoration: underline;
    }
    .status-button {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        margin-bottom: 10px ;
    }
    .borrow-button {
        background-color: #f6ab00;
    }
    .return-button {
        background-color: #ff4d4f;
    }

    .material-group {
        background-color: #f9f9f9;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .node-code {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 18px;
    }
    .status-button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

    /* 其他样式保持不变 */
    .group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .node-code {
        flex: 1;
        text-align: left;
    }
    .lend-info {
        flex: 1;
        text-align: left;
    }
    .status-button {
        flex-shrink: 0;
    }
    .lent-info {
        color: #999; /* 灰色文字 */
    }
    .lend-info {
        margin: 10px 0; /* 上下边距，使其显示在中间 */
    }
    .node-code {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 18px;

    }
    .status-button {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>